<template>
	<view class="padding_30">
		<view class="paydetail flex">
			<view class="paydetail-btn flex" @click="income">
				<view class="title font_style">
					收支明细
				</view>
				<image src="@/pages/user/static/images/detail_enter.png" mode="widthFix"></image>
			</view>
			<view class="illustrate flex" @click="illustrate">
				<view class="title font_style">
					资金说明
				</view>
				<image class="illustrate-img" src="@/pages/user/static/images/shuoming.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="account-box flex">
			<view class="account-item">
				<view class="title font_style">
					奖励账户
				</view>
				<view class="subtitle">
					(伴豆)
				</view>
				<view class="account-total flex">
					<view style="width: 44rpx;height: 44rpx;">
						<image src="@/pages/user/static/images/dou.png" mode="aspectFill"></image>
					</view>
					<view class="total font_style">
						{{userstore.userInfo.reward_money}}
					</view>
				</view>
			</view>
			<view class="account-item" style="background: linear-gradient( 135deg, #3EEEAE 0%, #06CEAA 100%);">
				<view class="account-header flex">
					<view class="title font_style">
						通用账户
					</view>
					<view class="account-detail font_style" @click="todetail">
						充值
					</view>
				</view>
				<view class="subtitle font_style">
					(星光)
				</view>
				<view class="account-total flex">
					<view style="width: 44rpx;height: 44rpx;">
						<image src="@/pages/user/static/images/bill.png" mode="aspectFill"></image>
					</view>
					<view class="total font_style">
						{{userstore.totalMoney}}
					</view>
				</view>
			</view>
		</view>
		<view class="task-title">
			<image class="left-img" src="@/static/images/left_title.png" mode="aspectFill"></image>
			<text class="middle-title">任务奖励</text>
			<image class="right-img" src="@/static/images/right_title.png" mode="aspectFill"></image>
		</view>
		<view class="task-item flex" v-for="(item,index) in userstore.taskList" :key="item.id">
			<view class="title-img">
				<image :src="baseUrl+'/'+item.image" mode="aspectFill"></image>
			</view>
			<view class="task-name">
				<view class="name">
					{{item.title}}
				</view>
				<view class="get-dou">
					获得{{item.prize_money}}伴豆
					<text v-if="item.type=='4'">/位</text>
				</view>
			</view>
			<view class="y-get-btn" v-if="item.task_status==2">
				已领取
			</view>
			<view class="get-btn" v-if="item.task_status==1" @click="receive(item.type)">
				领取
			</view>
			<view class="no-finish-btn" v-if="item.task_status==0">
				未完成
			</view>
		</view>
		<!-- 资金说明 -->
		<uv-popup :round="15" ref="showRef" :safeAreaInsetBottom="false" mode="center">
			<view class="tips-popup">
				<view class="tips-title">
					资金说明
				</view>

				<view class="tips-conent">
					<uv-parse :content="content"></uv-parse>
				</view>
				<view class="know-btn" @click="showRef.close()">
					知道了
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		useUserStore
	} from '@/store/modules/user.js'
	const userstore = useUserStore()
	import {
		throttle
	} from '@/utils/utils.js'
	const baseUrl = ref('')
	const showRef = ref()
	// 资金说明提示内容
	const content = ref('')
	onLoad(() => {
		baseUrl.value = uni.getStorageSync('baseUrl')
		userstore.getTaskList()
		userstore.getMoneyAmount()
	})
	const illustrate = async () => {
		let res = await userstore.getConFig({
			type: 'moneyTips'
		})
		if (res.code == 200) {
			content.value = res.data.content
			showRef.value.open()
		}
	}
	// 领取
	const receive = throttle(async (type) => {
		let res = await userstore.userReceive({
			type
		})
		if (res.code == 200) {
			uni.$uv.toast('领取成功')
			userstore.getTaskList()
			userstore.getUserInfo()
		}
	}, 200)
	const todetail = () => {
		uni.navigateTo({
			url: '/pages/user/account/index?total=' + userstore.totalMoney
		})
	}
	const income = () => {
		uni.navigateTo({
			url: '/pages/user/income/index'
		})
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.paydetail {
		justify-content: space-between;

		.paydetail-btn {
			width: 180rpx;
			height: 64rpx;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #111111;

			.title {
				font-weight: bold;
				padding-right: 8rpx;
			}

			image {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.illustrate {
			.title {
				font-weight: bold;
				padding-right: 12rpx;
			}

			.illustrate-img {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.account-box {
		justify-content: space-between;
		margin: 30rpx 0 60rpx 0;

		.account-item {
			padding: 30rpx;
			width: 330rpx;
			// height: 220rpx;
			background: linear-gradient(135deg, #FFDCCF 0%, #FFA583 96%, #FFA280 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.title {
				height: 56rpx;
				font-weight: bold;
			}

			.account-header {
				justify-content: space-between;

				.account-detail {
					width: 112rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					border: 2rpx solid #111111;
					font-weight: bold;
					text-align: center;
				}
			}

			.subtitle {
				padding: 5rpx 0 20rpx 0;
			}

			.account-total {
				justify-content: flex-start;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.total {
					margin-left: 10rpx;
					font-weight: bold;
					font-size: 48rpx;
				}
			}
		}
	}

	.task-title {

		.left-img {
			width: 30rpx;
			height: 24rpx;
		}

		.middle-title {

			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
			text-align: left;
		}

		.right-img {
			width: 24rpx;
			height: 24rpx;
		}
	}

	.task-item {
		justify-content: flex-start;
		padding: 40rpx;
		margin-top: 30rpx;
		width: 690rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.title-img {
			image {
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
			}
		}

		.task-name {
			flex: 1;
			margin-left: 30rpx;

			.name {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}

			.get-dou {
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FE3052;
			}
		}

		.y-get-btn {
			width: 132rpx;
			height: 58rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #222222;
			font-weight: bold;
			font-size: 24rpx;
			color: #222222;
			line-height: 58rpx;
			text-align: center;
		}

		.get-btn {
			width: 132rpx;
			height: 58rpx;
			background: #FE3052;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 58rpx;
			text-align: center;
		}

		.no-finish-btn {
			width: 132rpx;
			height: 58rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #D8D8D8;
			font-weight: bold;
			font-size: 24rpx;
			color: #999999;
			line-height: 58rpx;
			text-align: center;
		}
	}

	// 资金说明
	.tips-popup {
		width: 630rpx;

		// height: 748rpx;
		.tips-title {
			padding: 40rpx 0 60rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
		}

		.tips-conent {
			padding: 0 50rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.know-btn {
			width: 550rpx;
			height: 88rpx;
			background: #FE3052;
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 60rpx auto 40rpx auto;
		}
	}
</style>